<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sina News Crawler</title>
<link type="text/css" href="css/jquery-ui-1.8.11.custom.css"
	rel="stylesheet" />
<link type="text/css" href="css/cluster.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript">
<!--
	$(function(){
		$(".main").css("margin-top", "300px");
		$(".progressbar").progressbar({
			value : 100
		});
		
		$.ajax({
			url : "crawl.do",
			dataType : 'json',
			success : function(data) {
				if (data == null) {
					alert("Cannot crawl any news!");
					return;
				}
				
				var board = $(".main");
				
				board.animate({
				    "margin-top" : "0px"
				  }, 1000);
				
				board.children().remove();
				var table = $("<table class='tablesorter'></table>");
				table.append($("<thead><tr>"
				+ "<th class='title'>Title</th>"
				+ "<th class='timestamp'>Timestamp</th>"
				+ "<th class='body'>Body</th>"
				+ "</tr></thead>"));
				var even = 0;
				var tr = null;
				var tbody = $("<tbody></tbody>");
				$.each(data, function(key, value){
					tr = $("<tr>"
						+ "<td>" + value['title'] + "</td>"
						+ "<td>" + value['timestamp'] + "</td>"
						+ "<td class='body'>" + value['body'] + "</td>"
						+ "</tr>");
					if (even) {
						tr.addClass("alt");
					}
					tr.click(function() {
						$("#content").dialog({
							title: value['title'],
							resizable: true,
							width: 450
						});
						$("#newsbody").html(value['body']);
					});
					tbody.append(tr);
					even = 1 - even;
				});
				table.append(tbody);
				board.append(table);
				board.append($("<div id='content'><p id='newsbody'></p></div>"));
				table.tablesorter();
				
			},
			error : function(xhr, testStatus, error) {
				alert("Cannot crawl any news!");
				return;
			}
		});
	});
	
//-->
</script>
</head>
<body>
<div class="main">
<div class="progressbar"></div>
<div align="center">Crawling news from SINA...<br/>It may take a while.</div>
</div>
</body>
</html>